<template>
    <div>
        <!-- 内转出场-分页 -->
        <base-list ref="nzcc" :condition="condition" :datas.sync="nzcc" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="110px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="计划编号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_planNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_containerNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作业状态">
                            <el-select v-model="condition['search_EQ_jobStatus']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictJobStatus" :key="key" :label="val" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input type="text" v-model.trim="condition.search_LIKE_cargoName"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="预计作业时间">
                            <date-slot :startDate.sync="condition.search_GTE_planJobDate" dateType="yyyy-MM-dd" :endDate.sync="condition.search_LTE_planJobDate"></date-slot>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-button class="ml-110" icon="el-icon-search" type="primary" @click="loadData">查 询</el-button>
                        <el-button @click="handleWork">作 业</el-button>
                        <el-button @click="handleExport">导出Excel</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-alert v-if="multipleSelection.length>0" :title="'已选择'+multipleSelection.length+'条'" class="mt-20" type="success">
                    </el-alert>
                </el-row>
            </el-form>
            <el-table slot="list" :data="nzcc" border stripe max-height="500" @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                <el-table-column fixed="left" prop="id" label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index+1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="planJobDate" label="预计作业日期"  min-width="130"> </el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
                <el-table-column prop="wagonNo" label="车皮号"  min-width="120"></el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="stratStationName" label="发站"  min-width="160"></el-table-column>
                <el-table-column prop="endStationName" label="到站"  min-width="160"></el-table-column>
                <el-table-column prop="ownerName" label="箱主"  min-width="160"></el-table-column>
                <el-table-column prop="cargoName" label="货名"  min-width="75"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
                <el-table-column prop="shipper" label="托运人"  min-width="120"></el-table-column>
                <el-table-column prop="shipperTel" label="联系电话"  min-width="120"></el-table-column>
                <el-table-column prop="consignee" label="收货人"  min-width="120"></el-table-column>
                <el-table-column prop="consigneeTel" label="联系电话"  min-width="120"></el-table-column>
                <el-table-column prop="jobStatus" label="作业状态"  min-width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fall">已落空</span>
                        <span v-else>{{ scope.row.jobStatus | _filterJobStatus }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="planNo" label="计划编号"  min-width="140"></el-table-column>
                <!-- <el-table-column prop="entrustNo" label="委托编号"  min-width="140"></el-table-column> -->
            </el-table>
        </base-list>
        <el-dialog title="内转出场作业" :visible.sync="dialogForm" :modal="false" :modal-append-to-body="false" width="500px" style="margin-top: 23vh;">
            <el-form :rules="rules" ref="form" :model="form">
                <el-row style="margin-top:10px">
                    <el-col :span="16">
                        <el-form-item label-width="80px" label="车号" prop="plateNumber">
                            <el-input v-model="form.plateNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm=false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { NZCC, nzccWork } from "@/api/containerJob/containerJob";
import dateSlot from "@/components/date/dateSlot";
import searchCustom from "@/components/autocomplete/autoSearchCustom";
import searchContract from "@/components/autocomplete/autoSearchContract";
import { newExportExcel } from "@/utils/newExport";
import {ifHeavyType,tradeType,jobStatus} from "../../../assets/dict";
export default {
    name: "NZCC",
    components: {
        dateSlot,
        searchCustom,
        searchContract
    },
    data() {
        return {
            dialogForm: false,
            form: {
                plateNumber: ""
            },
            rules: {
                plateNumber: [
                    { required: true, message: "请输入车号", trigger: "change" }
                ]
            },
            pageSearch: NZCC, //查询接口名
            condition: {
                search_EQ_jobStatus: "NOOPERATE"
            }, // 查询条件
            nzcc: [], // table数组
            multipleSelection: [] // 选择的数组
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            this.$refs.nzcc.loadData();
        },
        handleSelectionChange(val) {
            this.multipleSelection = JSON.parse(JSON.stringify(val));
        },
        handleWork() {
            if (this.multipleSelection.length < 1) {
                this.$message({ message: "请先选择一条数据!", type: "error" });
                return;
            }
            this.dialogForm = true;
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let data = [];
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        const element = this.multipleSelection[i];
                        let params = {
                            planNo: element.planNo,
                            containerNo: element.containerNo,
                            plateNumber: this.form.plateNumber,
                            id:element.id,
                        };
                        data.push(params);
                    }
                    nzccWork(data).then(res => {
                        this.$message({
                            message: "作业成功!",
                            type: "success"
                        });
                        this.dialogForm = false;
                        this.loadData();
                    });
                } else {
                    this.$message({
                        message: "请检查表单",
                        type: "error"
                    });
                }
            });
        },
        handleExport(){
            let map = new Map();
            map.set('planJobDate','预计作业日期')
            map.set('containerNo','箱号')
            map.set('wagonNo','车皮号')
            map.set('containerType','箱型')
            map.set('containerSize','尺寸')
            map.set('ifHeavy','空重')
            map.set('tradeType','内外贸')
            map.set('stratStationName','发站')
            map.set('endStationName','到站')
            map.set('ownerName','箱主')
            map.set('cargoName','货名')
            map.set('cargoWeight','货重')
            map.set('shipper','托运人')
            map.set('shipperTel','联系电话')
            map.set('consignee','收货人')
            map.set('consigneeTel','联系电话')
            map.set('jobStatus','作业状态')
            map.set('planNo','计划编号')
            let params = this.$assist.copySearchConditions(this.condition)
            params.iDisplayLength=99999
            NZCC(params).then(res => {
                let exportRecords = [];
                let exportArr = res.data.aaData;
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ifHeavy") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "jobStatus") {
                            record[key] = jobStatus.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("内转出场", exportRecords);
            })
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.$refs.form.resetFields();
                this.form.plateNumber = "";
            }
        }
    }
};
</script>

<style>
</style>
